<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="timeline">
        <li>
            <h4>2021</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
        <li>
            <h4>2020</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
        <li>
            <h4>2019</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
        <li>
            <h4>2018</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
        <li>
            <h4>2017</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
        <li>
            <h4>2016</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
        <li>
            <h4>2015</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
        <li>
            <h4>2014</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
        <li>
            <h4>2013</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae risus ut erat laoreet tempus.
                Curabitur vitae nunc fermentum lacus auctor tempus id non ante. Vestibulum eu lacus vestibulum,</p>
        </li>
    </ul>
</body>

<style>
    .timeline {
        --w: 600px;
        /* the break point*/

        list-style: none;
        max-width: 900px;
        margin: 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(clamp(100%/3 + 0.1%, (var(--w) - 100vw)*1000, 100%), 1fr));
        grid-gap: 20px 45px;
        position: relative;
    }

    .timeline:before {
        content: "";
        position: absolute;
        inset: 0 calc(50% - 1px) 0;
        background: repeating-linear-gradient(#0000 0 6px, #000 0 12px);
    }

    .timeline li {
        border-radius: 15px;
        padding: 10px;
        background: #37b1d9;
        color: #fff;
        position: relative;
    }

    .timeline li * {
        margin: 0;
    }

    .timeline li h4 {
        font-size: 23px;
        margin-bottom: 5px;
    }

    .timeline li:before {
        content: "";
        position: absolute;
        top: 25px;
        left: 100%;
        width: 10px;
        height: 15px;
        background: inherit;
        clip-path: polygon(0 0, 100% 50%, 0 100%);
    }

    .timeline li:after {
        content: "";
        position: absolute;
        border-radius: 50%;
        top: 27px;
        width: 11px;
        height: 11px;
        left: calc(100% + 17px);
        background: #000;
    }

    .timeline li:nth-child(even):before {
        right: 100%;
        left: auto;
        bottom: 25px;
        top: auto;
        transform: scaleX(-1);
    }

    .timeline li:nth-child(even):after {
        bottom: 27px;
        top: auto;
        right: calc(100% + 17px);
        left: auto;
    }

    *:before,
    *:after {
        max-width: clamp(0px, (100vw - var(--w))*1000, 100%);
        max-height: clamp(0px, (100vw - var(--w))*1000, 1000px);
    }

    .timeline li:nth-child(4n + 1) {
        background: #37b1d9;
    }

    .timeline li:nth-child(4n + 2) {
        background: #6cd937;
    }

    .timeline li:nth-child(4n + 3) {
        background:
            linear-gradient(#6cd937, #6cd937) 0/max(0px, 100vw - var(--w)) 1px,
            #37b1d9;
    }

    .timeline li:nth-child(4n + 4) {
        background:
            linear-gradient(#37b1d9, #37b1d9) 0/max(0px, 100vw - var(--w)) 1px,
            #6cd937;
    }
</style>

</html>